<div class="modal-header success">
    <h4 class="modal-title" id="modal-title">
        Create OAuth2
        <a  class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>
    </h4>
</div>
<div class="col-md-12 bg-light-grey padding">
    <p class="text-muted no-margin">Create OAuth2 for <strong><span class="text-success">{{consumer.username || consumer.custom_id}}</span></strong></p>
</div>

<div class="modal-body" id="modal-body">
    <form class="form-horizontal">
        <div class="form-group" ng-class="{'has-error' : errors.name}">
            <label class="col-sm-4 control-label">name <br><em><small class="help-block">required</small></em></label>
            <div class="col-sm-7">
                <input ng-model="data.name" class="form-control">
                <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
                <p class="help-block">The name to associate to the credential. In OAuth 2.0 this would be the application name.</p>
            </div>
        </div>


        <div class="form-group" ng-class="{'has-error' : errors.client_id}">
            <label class="col-sm-4 control-label">client_id <br><em><small class="help-block">optional</small></em></label>
            <div class="col-sm-7">
                <input ng-model="data.client_id" class="form-control">
                <div class="text-danger" ng-if="errors.client_id" data-ng-bind="errors.client_id"></div>
                <p class="help-block">You can optionally set your own unique <code>client_id</code>. If missing, the plugin will generate one.</p>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : errors.client_secret}">
            <label class="col-sm-4 control-label">client_secret <br><em><small class="help-block">optional</small></em></label>
            <div class="col-sm-7">
                <input ng-model="data.client_secret" class="form-control">
                <div class="text-danger" ng-if="errors.client_secret" data-ng-bind="errors.client_secret"></div>
                <p class="help-block">You can optionally set your own unique <code>client_secret</code>. If missing, the plugin will generate one.</p>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : errors.redirect_uris}">
            <label class="col-sm-4 control-label">redirect_uris <br><em><small class="help-block">required</small></em></label>
            <div class="col-sm-7">
                <chips ng-model="data.redirect_uris">
                    <chip-tmpl>
                        <div class="default-chip">
                            {{chip}}
                            <i class="mdi mdi-close" remove-chip></i>
                        </div>
                    </chip-tmpl>
                    <input chip-control/>
                </chips>
                <div class="text-danger" ng-if="errors.redirect_uris" data-ng-bind="errors.redirect_uris"></div>
                <p class="help-block">
                    <small>Press enter to apply every value you type</small>
                <p>
                <p class="help-block">
                    The URL in your app where users will be sent after authorization (<a href="https://tools.ietf.org/html/rfc6749#section-3.1.2">RFC 6742 Section 3.1.2</a>)
                </p>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-7">
                <button type="submit" class="btn btn-primary" ng-click="create()">
                    <i class="mdi mdi-check"></i>
                    Submit
                </button>
            </div>
        </div>

    </form>
</div>